<template>
	<view class="detail">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :circular="true" class="swiper">
			<swiper-item v-for="item in banners" :key="item.id" class="item"><image :src="item" mode=""></image></swiper-item>
		</swiper>
		<!-- 商品信息 -->
		<view class="info">
			<view class="prices">
				<view class="promotionPrice">
					<text>¥{{ productInfo.promotionPrice || '0' }}</text>
					<text>.00</text>
				</view>
				<view class="originalPrice">¥{{ productInfo.price || '0' }}.00</view>
				<view class="promotionIcon">没有促销使用原价</view>
			</view>
			<view class="name">{{ productInfo.name }}</view>
			<view class="desc">{{ productInfo.description }}</view>
			<view class="collect" @tap="collectClick"><uni-icons type="star" class="collectIcon" size="26" :color="isCollect ? '#f00' : '#fff'"></uni-icons></view>
		</view>
		<view class="content"><mp-html :content="productInfo.detailMobileHtml" /></view>
		<view class="footer">
			<view class="kf"><image src="../../../static/icons/kf.png" mode=""></image></view>
			<view class="btns">
				<view class="addCart btn" @tap="handleShowPop(true)">添加到购物车</view>
				<view class="buy btn" @tap="handleShowPop(false)">立即购买</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pop-content" @mousewheel.prevent>
				<image :src="productInfo.skuList && productInfo.skuList.length ? productInfo.skuList[selectStyle].pic : ''" mode="" class="icon-product"></image>
				<image src="../../../static/icons/x.png" class="icon-close" @click="handleClosePop"></image>
				<view class="product-info">
					<view class="name">{{ productInfo.name }}</view>
					<view class="stock">库存数量: {{ stockNum }}</view>
				</view>
				<view class="styles">
					<view class="title">商品选择</view>
					<view class="skuList" v-if="productInfo.skuList && productInfo.skuList.length">
						<view
							class="list-item"
							:class="{ selected: selectStyle == index }"
							v-for="(item, index) in productInfo.skuList"
							:key="item.id"
							@tap="handleSelectStyle(index)"
						>
							{{ JSON.parse(item.spData)[0].value }} {{ JSON.parse(item.spData)[1].value }}
						</view>
					</view>
				</view>
				<!-- 服务 -->
				<view class="services">
					<view class="title">特色服务</view>
					<view class="service-item">
						<text>送货上户</text>
						<text>【商家赠送】</text>
					</view>
					<view class="service-item">
						<text>上门安装</text>
						<text>【商家赠送】</text>
					</view>
				</view>
				<!-- 购买数量 -->
				<view class="buynum">
					<view class="title">购买数量</view>
					<uni-number-box
						:value="buynum"
						:min="1"
						@change="
							e => {
								buynum = e;
							}
						"
					></uni-number-box>
				</view>
				<view class="btn" @tap="handleConfirm">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { addCart, productDetail, addPreOrder } from '../../../api/kind/productDetail/index.js';
import mixin from '../../../mixins/mixin.js';
export default {
	mixins: [mixin],
	data() {
		return {
			productId: '', // 商品Id
			productInfo: {}, // 商品详情
			isCollect: false, // 是否收藏
			selectStyle: 0, // 商品样式选择,默认第一个
			buynum: 1, // 购买数量,默认是1
			isAddCart: true, // 标识是添加购物车还是直接购买
			isShowPop: false, //  pop是否显示
			banners: [] // 轮播图
		};
	},
	computed: {
		stockNum() {
			return this.productInfo.skuList && this.productInfo.skuList.length ? this.productInfo.skuList[this.selectStyle].stock : 0;
		}
	},
	methods: {
		// 获取商品详情
		async getProductDetail() {
			const detailResp = await productDetail(this.productId);
			console.log('detailResp:', detailResp);
			this.productInfo = detailResp.data.product;
			uni.setNavigationBarTitle({
				title: this.productInfo.name
			});
			this.banners = detailResp.data.product.albumPics ? detailResp.data.product.albumPics.split(',') : [];
		},
		// 收藏
		collectClick() {
			if (this.checkLogin()) {
				const collectList = uni.getStorageSync('collectList');
				if (!collectList) {
					uni.setStorageSync('collectList', [this.productInfo]);
					this.isCollect = true;
					uni.showToast({
						title: '收藏成功',
						icon: 'success'
					});
				} else {
					const index = collectList.findIndex(item => item.id == this.productId);
					if (index == -1) {
						collectList.push(this.productInfo);
						this.isCollect = true;
						uni.showToast({
							title: '收藏成功',
							icon: 'success'
						});
					} else {
						collectList.splice(index, 1);
						this.isCollect = false;
						uni.showToast({
							title: '取消收藏',
							icon: 'success'
						});
					}
					uni.setStorageSync('collectList', collectList);
				}
			}
		},
		// 显示pop
		handleShowPop(val) {
			console.log(val);
			this.isShowPop = true;
			this.isAddCart = val;
			this.$refs.popup.open();
		},
		// 关闭pop
		handleClosePop() {
			this.isShowPop = false;
			this.$refs.popup.close();
		},
		// 商品选择
		handleSelectStyle(index) {
			this.selectStyle = index;
		},
		// 添加到购物车
		async addCarts() {
			const { success, message } = await addCart({
				productId: this.productId,
				productSkuId: this.productInfo.skuList[this.selectStyle].id,
				quantity: this.buynum
			});
			if (success) {
				uni.showToast({
					title: '已添加到购物车'
				});
			} else {
				uni.showToast({
					title: message,
					icon: 'error'
				});
			}
		},
		// 直接购买
		async addPreOrders() {
			const { success, data } = await addPreOrder({
				orderItemList: [
					{
						productId: this.productId,
						productSkuId: this.productInfo.skuList[this.selectStyle].id,
						productQuantity: this.buynum
					}
				]
			});
			if (success) {
				uni.showToast({
					title: '下单成功'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/order/confirmorder/confirmorder?id=${data.orderId}`
					});
				}, 1000);
			} else {
				uni.showToast({
					title: message,
					icon: 'error'
				});
			}
		},
		// 点击确认
		async handleConfirm() {
			if (this.checkLogin()) {
				if (this.isAddCart) {
					this.addCarts();
				} else {
					this.addPreOrders();
				}
			}
		}
	},
	onLoad(options) {
		this.productId = options.id;
		this.getProductDetail();
		// 查看是否收藏
		const collectList = uni.getStorageSync('collectList') || [];
		const index = collectList.findIndex(item => item.id == this.productId);
		this.isCollect = index > -1;
	}
};
</script>

<style lang="scss" scoped>
.detail {
	&.all-list {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}
	.swiper {
		height: 634rpx;
		.item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	// 商品信息
	.info {
		position: relative;
		padding: 70rpx;
		.prices {
			display: flex;
			align-items: baseline;
			font-family: fantasy;
			.promotionPrice {
				font-size: 60rpx;
				color: #f2270c;
				&:first-letter {
					font-size: 32rpx;
				}
				text:last-child {
					font-size: 32rpx;
				}
			}
			.originalPrice {
				margin: 0 8rpx;
				font-size: 24rpx;
				color: #b5b5b5;
				text-decoration: line-through;
			}
			.promotionIcon {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
				color: #fff;
				background-color: #f2270c;
				border-radius: 8rpx;
				padding: 2rpx 0;
				margin-bottom: 6rpx;
				&::before,
				&::after {
					content: '';
					height: 12rpx;
					width: 6rpx;
					background-color: #fff;
					margin-right: 12rpx;
					border-radius: 0 6rpx 6rpx 0;
				}
				&::after {
					margin-left: 12rpx;
					margin-right: 0;
					border-radius: 6rpx 0 0 6rpx;
				}
			}
		}
		.name {
			color: #262626;
			overflow: hidden;
			font-size: 32rpx;
			font-weight: 700;
		}
		.desc {
			font-size: 24rpx;
			padding: 36rpx 0 0;
			line-height: 1.3;
			color: #666;
		}
		.collect {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			width: 100rpx;
			position: absolute;
			top: -50rpx;
			right: 100rpx;
			background-color: #354e44;
			border-radius: 50%;
			z-index: 1;
			image {
				height: 60rpx;
				width: 60rpx;
			}
		}
	}
	.content {
		padding: 60rpx 60rpx 120rpx;
	}
	// 底部按鈕
	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 0 60rpx;
		background-color: #fff;
		z-index: 1;
		.kf {
			image {
				width: 60rpx;
				height: 50rpx;
			}
		}
		.btns {
			font-size: 30rpx;
			.btn {
				display: inline-block;
				width: 238rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}
			.addCart {
				background: #e2e2e2;
				color: #8f8f94;
			}
			.buy {
				background-color: #354e44;
				color: #fff;
			}
		}
	}

	// pop弹窗
	.pop-content {
		width: 628rpx;
		height: 926rpx;
		position: relative;
		background: #fff;
		border-radius: 40rpx;
		padding: 56rpx;
		box-sizing: border-box;
		.icon-product {
			width: 192rpx;
			height: 192rpx;
			position: absolute;
			top: -56rpx;
			border-radius: 16rpx;
			background-color: #435950;
		}
		.icon-close {
			width: 42rpx;
			height: 42rpx;
			position: absolute;
			top: 62rpx;
			right: 62rpx;
		}
		.product-info {
			margin-top: 44rpx;
			margin-left: 210rpx;
			width: 260rpx;
			.name {
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.stock {
				font-size: 24rpx;
				color: #b0b0b0;
			}
		}
		.styles {
			min-height: 200rpx;
			.title {
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #3e3e3e;
				letter-spacing: 2rpx;
			}
			// 商品样式
			.skuList {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;
				max-height: 220rpx;
				min-height: 200rpx;
				overflow: auto;
				.list-item {
					height: 60rpx;
					box-sizing: border-box;
					background: #f2f4f3;
					border-radius: 10rpx;
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #3e3e3e;
					padding: 10rpx 20rpx;
					letter-spacing: 1.86rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
					border: 2rpx solid transparent;
					&.selected {
						border: 2rpx solid #354e44;
					}
				}
			}
		}
		// 特色服务
		.services {
			margin-top: 20rpx;
			border-bottom: 2rpx solid #f2f4f3;
			padding-bottom: 36rpx;
			.title {
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #3e3e3e;
				letter-spacing: 2rpx;
			}

			.service-item {
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 60rpx;
				color: #3e3e3e;
				font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
				background: #f2f4f3;
				border-radius: 10rpx;
				text-align: left;
				padding: 0 20rpx;
				margin: 10rpx 0;
				box-sizing: border-box;
			}
		}
		// 购买数量
		.buynum {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32rpx;
			/deep/.uni-numbox__minus,
			/deep/.uni-numbox__plus,
			/deep/.uni-numbox__value {
				height: 60rpx;
				width: 60rpx;
				border: none;
				background: #f1ece7;
				border-radius: 42rpx;
				margin: 0 4rpx;
			}
			/deep/.uni-numbox__value {
				width: 90rpx;
			}
		}
		//确定按钮
		.btn {
			width: 208rpx;
			height: 80rpx;
			background: #354e44;
			border-radius: 28rpx;
			margin: 28rpx auto;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
}
</style>
